<template>
  <div class="main_box">
    <el-row class="boxRow">
      <el-col class="boxMain px-3">
        <div class="chart_title justify_between align-items-center">
          <div class=" d-flex align-items-center ml-n1">
            <div class="line-title"></div>
            <div class="title">系统重点操作记录</div>
          </div>
          <!-- <div><span>设备编号：{{ info.id }}</span></div>
          <div><span>设备地址：{{ info.address }}</span></div> -->
        </div>
        <el-table :data="tableOne" height="100%" :header-cell-style="{ background: '#e8f5e2' }" ref="table_one">
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="userName" label="用户名称" align="center"/>
          <el-table-column prop="operationType" label="操作类型" align="center"/>
          <el-table-column prop="operation" label="操作内容" align="center"/>
          <el-table-column prop="createTime" label="操作时间" align="center"/>
        </el-table>
      </el-col>
      <el-col class="boxMain lastLine px-3">
        <div class="chart_title justify_between align-items-center">
          <div class=" d-flex align-items-center ml-n1">
            <div class="line-title"></div>
            <div class="title">设备重点事件记录</div>
          </div>
          <!-- <div><span>设备编号：{{ info.id }}</span></div>
          <div><span>设备地址：{{ info.address }}</span></div> -->
        </div>
        <el-table :data="tableTwo" height="100%" :header-cell-style="{ background: '#f0e2f5' }" ref="table_two">
          <!-- <el-table-column prop="deviceCode" label="设备编码" align="center" /> -->
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceLocation" label="设备位置" align="center"/>
          <el-table-column prop="operation" label="设备运行记录" align="center"/>
          <el-table-column prop="createTime" label="发生时间" align="center"/>
        </el-table>
      </el-col>
    </el-row>
    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
  import * as echarts from "echarts"
  import charts from "../../chart/chart.js"
  import deployDialog from "./dialog/deployDialog.vue"
  import { queryOperation } from "@/api/projectOverview/index"

  export default {
    components: {
      deployDialog
    },
    props: {
      isView: { //展示还是配置
        type: Boolean,
        default: () => true
      },
      configured: {
        // 已配置
        type: Array,
        default: () => []
      },
      tableSet: {
        //获取数据的配置参数params
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        tabNum: 0,
        setNum: 0,
        tableOne: [],
        tableTwo: [],
        info: {
          title: "S001断路器",
          id: "DEV98023781",
          address: "A区1栋五层505"
        },
        timeInterval: null
      }
    },
    created() {
      this.setTime()
    },
    beforeDestroy() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
    mounted() {
      this.getList()
      this.infinitScroll("table_one")
      this.infinitScroll("table_two")
    },
    methods: {
      setTime() {
        this.timeInterval = setInterval(() => {
          this.getList()
        }, 20000)
      },
      getList() {
        queryOperation().then(res => {
          if (res.object == null) return
          this.tableOne = res.object.tableOne
          this.tableTwo = res.object.tableTwo
        })
      },
      setDeploy(num) {
        this.setNum = num
        this.$refs.deployDialog.isView = true
        this.$refs.deployDialog.dialogVisible = true
      },
      refresh(id) {
        this.configured.push(this.setNum)
      },
      infinitScroll(name) {
        const table = this.$refs[name]
        const divData = table.bodyWrapper
        divData.onmouseover = function() {
          clearInterval(t)
        }
        divData.onmouseout = function() {
          start()
        }
        let t

        function start() {
          t = setInterval(() => {
            divData.scrollTop += 1
            if (divData.scrollHeight - (divData.clientHeight + divData.scrollTop) < 1) {
              divData.scrollTop = 0
            }
          }, 30)
        }

        start()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .main_box {
    height: 36%;
  }

  .box_table {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    margin-bottom: 16px;
    background-color: #fff;
    width: calc((100% - 10px) / 1.5);
    height: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 8px 0;
    position: relative;
    margin-right: 20px;
  }

  .boxRow {
    display: flex;
    width: 100%;
    height: 100%;
    // padding: 10px 0 10px 10px;

    span {
      color: #9a9a9a;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .boxMain {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    margin-bottom: 16px;
    background-color: #fff;
    width: calc((100% - 20px) / 2);
    height: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 8px 0;
    position: relative;
    margin-right: 20px;
  }

  .my_chart {
    // height: 240px;
    // width: 100%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  .chart_title {
    padding: 10px;
  }

  .justify_between {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .tab_title {
    font-size: 18px;
    font-weight: 400;
  }

  .deploy {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .configured {
    text-align: right;
    margin-right: 8px;
    color: #3276ff;
    cursor: pointer;
  }

  .line-title {
    width: 4px;
    height: 12px;
    background-color: #3276ff;
    margin-right: 10px;
    border-radius: 4px;
  }

  .title {
    font-family: 'SourceHan';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
  }

  .lastLine {
    margin-right: 0 !important;
  }
</style>
